<template>
  <ManagePage
    v-model:column-option="columnOption"
    :search-option="searchOption"
    :api-option="apiOption"
  />
</template>

<script>
import { apiGetBlogList, apiDeleteBlog } from '@/api/blog.js'
import ManagePage from '@/components/ManagePage/index.vue'

export default {
  name: 'BlogView',
  components: { ManagePage },
  data () {
    return {
      // 搜索类型
      searchOption: [
        { label: '默认', value: '' },
        { label: '作者id', value: 'author_id' },
        { label: '标题', value: 'title' },
        { label: '内容', value: 'content' },
        { label: '描述', value: 'des' },
        { label: '关键字', value: 'keyword' },
        { label: '作者名', value: 'author' }
      ],
      // 格式组件
      columnOption: [
        { field: 'title', cname: '标题', cshow: true, align: 'center', showname: '标题', clock: false, width: 180 },
        { field: 'author', cname: '作者名', cshow: true, align: 'center', showname: '作者名', clock: false, width: 100 },
        { field: 'author_id', cname: '作者id', cshow: true, align: 'center', showname: '作者id', clock: false, width: 80 },
        { field: 'des', cname: '描述', cshow: true, align: 'center', showname: '描述', clock: false, width: 160 },
        { field: 'keyword', cname: '关键字', cshow: true, align: 'center', showname: '关键字', clock: false, width: 160 },
        { field: 'lenght', cname: '字数', cshow: true, align: 'center', showname: '字数', clock: false, width: 160 },
        { field: 'visited', cname: '访问次数', cshow: true, align: 'center', showname: '访问次数', clock: false, width: 160 },
        { field: 'created_at', cname: '创建时间', cshow: true, align: 'center', showname: '创建时间', clock: false, width: 'auto' },
        { field: 'updated_at', cname: '更新时间', cshow: true, align: 'center', showname: '更新时间', clock: false, width: 'auto' },
        { field: 'operation', cname: '操作', cshow: true, align: 'center', showname: '操作', clock: true, width: 270 }
      ],

      apiOption: {
        primaryKey: 'id',
        create: {
          type: 'callback',
          callback: (row) => {
            window.open(`${import.meta.env.VITE_APP_ROUTE_PATH}/edit/0?type=0`)
          }
        },
        update: {
          type: 'callback',
          callback: (row) => {
            console.log(row)
            window.open(`${import.meta.env.VITE_APP_ROUTE_PATH}/edit/${row.id}?type=1`)
          }
        },
        del: {
          type: 'api',
          api: apiDeleteBlog
        },
        list: {
          type: 'api',
          api: apiGetBlogList
        }
      }
    }
  },
  methods: {
    // 删除
    del (row) {
      const msg = `删除${row.id}`
      this.$confirm(`是否${msg}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await apiDeleteBlog({ id: row.id })
        this.query.page = 1
        this.init()
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.blog{
  display: flex;
  flex-direction: column;
}
.row{
  padding: 0 0 15px 0;
}
.operation{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
